<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <div id="app">
        <add  @gotoapp="handler"></add>
        <xuan @gotoapp1="zan" @gotoapp2="top" @gotoapp3="del" :arr='list'></xuan>
    </div>


    <template id="add">
        <div>
            <textarea name="" id="" cols="30" rows="10" v-model.trim="ipt" @keyup.enter="handlerClick(ipt)"></textarea>
            <button @click="handlerClick(ipt)">发布评论</button>
        </div>
    </template>

    <template id="xuan">
           <div>
            <div v-for="item in arr">
                {{item.contents}}
                {{item.time}}
                {{item.count}}
                <button @click="zan(item)">点赞</button>
                <!-- 点赞 操作对象中的count++ -->
                <button @click="top(item)">置顶</button>
                <!-- 置顶 将数组中的某个元素放到第一位
                     就是用数组splice并且unshift
                 -->
                <button @click="del(item)">删除</button>
                <!-- 删除 将数组的某个元素删除 -->
            </div>
           </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.component('add', {
            template: '#add',
            data(){
                return {
                ipt:''
            }
            },
            methods: {
                handlerClick(ipt) {
                    // this.$emit(事件名称，传输数据)
                    // 事件派发
                    this.$emit('gotoapp', ipt)
                    this.ipt = ''
                }
            }
        })

        Vue.component('xuan', {
            props: ['arr'],
            template: '#xuan',
            methods: {
                zan(ipt){
                    // this.$emit(事件名称，传输数据)
                    // 事件派发
                    this.$emit('gotoapp1', ipt)
                },
                top(ipt){
                    // this.$emit(事件名称，传输数据)
                    // 事件派发
                    this.$emit('gotoapp2', ipt)
                },
                del(ipt){
                    // this.$emit(事件名称，传输数据)
                    // 事件派发
                    this.$emit('gotoapp3', ipt)
                },
            },

        })

        let vm = new Vue({
            el: '#app',
            data: {
                ipt: '',
                list: [
                    {
                        id: 1,
                        name: 'a',
                        contents: '苹果',
                        count: 0,
                        time: '2021-10-11'
                    },
                    {
                        id: 2,
                        name: 'b',
                        contents: '香蕉',
                        count: 0,
                        time: '2021-10-11'
                    },
                ]
            },
            methods: {
                handler(i) {
                    if (i === '') {
                        alert('请输入内容');
                        return
                    }
                    this.list.push({
                        id: this.list.length,
                        name: 'XXX',
                        contents: i,
                        count: 0,
                        time: 'xxxx-xx-xx'
                    })
                },
                zan(item) {
                    item.count++
                },
                top(item) {
                    this.list.splice(this.list.indexOf(item), 1)
                    this.list.unshift(item)
                    // console.log(item);
                },
                del(item) {
                    this.list.splice(this.list.indexOf(item), 1)
                },

            }
        })
    </script>
</body>

</html>